/*
 * @description 动画
 */
@import '../setting/scssVariable.scss';
@import '../mixins/index.scss';

/****************************** 一.hover颜色（pc）、点击颜色（pc、mobile） ******************************/

// 命名规则：{hb、hc、ab、ac}-数值
// 示例：hb-1 -> background-color: var(--aoda-color1);
@for $i from 1 through $atomic-color {
  [hb-#{$i}] {
    @include cursor;
    @include transition(background-color, 0.2s);

    &:hover {
      background-color: var(--aoda-color#{$i});
    }
  }

  [hc-#{$i}] {
    @include cursor;
    @include transition(color, 0.2s);

    &:hover {
      color: var(--aoda-color#{$i});
    }
  }

  [ab-#{$i}] {
    @include cursor;
    @include transition(background-color, 0.2s);

    &:active {
      background-color: var(--aoda-color#{$i});
    }
  }

  [ac-#{$i}] {
    @include cursor;
    @include transition(color, 0.2s);

    &:active {
      color: var(--aoda-color#{$i});
    }
  }
}
